//当框架加载完成之后自动执行次函数
$(function () {
    bindClickSms()
    bindClickRegister()
    validate_email()
    validate_password()
    validate_confirm_password()
    $('#id_mobile_phone').on('blur', function () {
        $('#id_mobile_phone').siblings('.error_msg').empty()
    })
    $('#id_username').on('blur', function () {
        $('#id_username').siblings('.error_msg').empty()
    })
    $('#id_password').on('blur', function () {
        $('#id_password').siblings('.error_msg').empty()
    })
    $('#id_confirm_password').on('blur', function () {
        $('#id_confirm_password').siblings('.error_msg').empty()
    })
});

//点击获取验证码
function bindClickSms() {
    $('.code').on('click', function () {
        //获取用户输入的手机号
        const mobilePhone = $('#id_mobile_phone').val()
        $('.error_msg').empty()
        //发送ajax请求
        $.ajax({
            url: "/send/sms",
            type: 'GET',
            data: {
                mobile_phone: mobilePhone,
                tpl: 'register'
            },
            dataType: 'JSON',
            success: function (res) {
                // res后端返回的值
                if (res.status) {
                    var num = 30
                    $('#code_btn').prop('disabled', true)
                    let time = setInterval(function () {
                        $('#code_btn').val(num + '秒后重新发送')
                        num--;
                        if (num < 1) {
                            clearInterval(time)
                            $('#code_btn').val('点击获取验证码').prop('disabled', false)
                        }
                    }, 1000)
                } else {
                    //错误信息
                    $.each(res.error, function (key, value) {
                        $('#id_' + key).siblings('.error_msg').text(value[0])
                    })
                }
            }
        })
    })
}

//点击注册
function bindClickRegister() {
    $('.register_btn').on('click', function () {
        $('.error_msg').empty()
        //收集表单数据
        const username = $('input[name="username"]').val() //获取所有字段的数据 serialize序列化表单中的值
        const email = $('input[name="email"]').val()
        const password = $('input[name="password"]').val()
        const confirm_password = $('input[name="confirm_password"]').val()
        const mobile_phone = $('input[name="mobile_phone"]').val()
        const code = $('input[name="code"]').val()
        const csrf_token = $('input[name="csrfmiddlewaretoken"]').val()
        //数据ajax发送到后台
        $.ajax({
            url: "/register/",
            type: 'POST',
            data: {
                'username': username,
                'email': email,
                'password': password,
                'confirm_password': confirm_password,
                'mobile_phone': mobile_phone,
                'code': code,
                'csrfmiddlewaretoken': csrf_token
            },
            dataType: 'JSON',
            success: function (res) {
                if (res.status) {
                    location.href = res.data;
                } else {
                    $.each(res.error, function (key, value) {
                        $('#id_' + key).siblings('.error_msg').text(value[0])
                    })
                }
            }
        })
    })
}

// 验证邮箱
function validate_email() {
    const validate = checkObject();
    $('input[name="email"]').on('focus', function () {
        $('input[name="email"]').next().css({'top': '-20px', 'color': '#03e9f4', 'font-size': '12px'})
    })
    $('input[name="email"]').on('blur', function () {
        if (validate.checkEmail($('input[name="email"]').val())) {
            if ($('input[name="email"]').val() !== '') {
                $('input[name="email"]').siblings('.error_msg').empty()
                $('input[name="email"]').siblings('.error_msg').text('邮箱不合法')
                $('input[name="email"]').next().css({'top': '-20px', 'color': '#03e9f4', 'font-size': '12px'})
            } else {
                $('input[name="email"]').siblings('.error_msg').empty()
                $('input[name="email"]').next().css({'top': '0', 'color': '#7c7c7c', 'font-size': '14px'})
            }
        } else {
            $('input[name="email"]').siblings('.error_msg').empty()
        }
    })
}

// 验证密码
function validate_password() {
    const validate = checkObject();
    $('input[name="password"]').on('focus', function () {
        $('input[name="password"]').next().css({'top': '-20px', 'color': '#03e9f4', 'font-size': '12px'})
    })
    $('input[name="password"]').on('blur', function () {
        if (validate.checkPassword($('input[name="password"]').val())) {
            if ($('input[name="password"]').val() !== '') {
                $('input[name="password"]').siblings('.error_msg').empty()
                $('input[name="password"]').siblings('.error_msg').text('密码格式不正确')
                $('input[name="password"]').next().css({'top': '-20px', 'color': '#03e9f4', 'font-size': '12px'})
            } else {
                $('input[name="password"]').siblings('.error_msg').empty()
                $('input[name="password"]').next().css({'top': '0', 'color': '#7c7c7c', 'font-size': '14px'})
            }
        } else {
            $('input[name="password"]').siblings('.error_msg').empty()
        }
    })
}

// 验证重复密码
function validate_confirm_password() {
    const validate = checkObject();
    $('input[name="confirm_password"]').on('focus', function () {
        $('input[name="confirm_password"]').next().css({'top': '-20px', 'color': '#03e9f4', 'font-size': '12px'})
    })
    $('input[name="confirm_password"]').on('blur', function () {
        if (validate.checkPassword($('input[name="confirm_password"]').val())) {
            if ($('input[name="confirm_password"]').val() !== '') {
                $('input[name="confirm_password"]').siblings('.error_msg').empty()
                $('input[name="confirm_password"]').siblings('.error_msg').text('密码格式不正确')
                $('input[name="confirm_password"]').next().css({
                    'top': '-20px',
                    'color': '#03e9f4',
                    'font-size': '12px'
                })
            } else {
                $('input[name="confirm_password"]').siblings('.error_msg').empty()
                $('input[name="confirm_password"]').next().css({'top': '0', 'color': '#7c7c7c', 'font-size': '14px'})
            }
        } else {
            $('input[name="confirm_password"]').siblings('.error_msg').empty()
        }
    })
}

//验证的正则
var checkObject = function () {
    return {
        //过滤特殊字符
        stripscript: function (s) {
            var pattern = new RegExp("[` ~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")
            var rs = "";
            for (var i = 0; i < s.length; i++) {
                rs = rs + s.substr(i, 1).replace(pattern, '');
            }
            return rs;
        },
        //验证邮箱
        checkEmail: function (value) {
            let reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            return reg.test(value) ? false : true
        },
        //验证密码
        checkPassword: function (value) {
            let reg = /^[a-zA-Z0-9]\w{5,19}$/;
            return reg.test(value) ? false : true
        },
        //验证验证码
        checkCode: function (value) {
            let reg = /^[a-zA-Z0-9]{6}$/;
            return reg.test(value) ? false : true
        }
    }
}